<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指纹锁骇入练习</title>
    <link rel="short icon" href="imgs/icon.png">
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

    <!-- toastr -->
    <link rel="stylesheet" href="css/toastr.min.css">
    <script src="js/toastr.min.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="css/glitch.css">
    <link rel="stylesheet" href="./css/index.css">

    <!-- JS -->
    <script src="js/util.js"></script>
    <script src="js/main.js"></script>

</head>

<body>

    <!-- 项目地址 -->
    <a id="repository" href="https://gitee.com/tanyiqu/gtav-fingerprintlock-trainer" target="_blank">项目地址</a>

    <img class="bg" src="imgs/bg.jpg" alt="">

    <img class="music" src="imgs/mute.png" alt="">
    <script>

    </script>

    <div class="container">

        <!-- 背景等 -->
        <div class="pre">
            <audio id="audio" src="sound/Funky Stars.mp3" autoplay loop>
            </audio>
            <script>
                document.getElementById("audio").volume = 0.2;
            </script>

            <div class="text-magic" data-word="FINGERPRINT  HACK">
                <div class="white"></div>
            </div>

            <div class="start">
                <h4>START</h4>
            </div>

            <div class="author">
                <h4>Code by tanyiqu</h4>
            </div>
        </div>

        <!-- 包裹主区域 -->
        <div class="main" style="display: none;">
            <main id="main">
                <div class="left">
                    <div class="timeout">
                        <div class="head">
                            <p>CONNECTION TIMEOUT</p>
                        </div>

                        <div class="timmer">
                            <p id="timmer">02 : 59 : 99</p>
                        </div>
                    </div>

                    <div class="component">
                        <div class="head">
                            <p>COMPONENTS</p>
                        </div>

                        <div class="fragments">
                            <div class="fragment">
                                <img id="fragment1" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment2" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment3" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment4" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment5" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment6" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment7" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                            <div class="fragment">
                                <img id="fragment8" class="fingerprint" src="imgs/fingerprints/none.jpg" alt="">
                            </div>
                        </div>

                        <div class="countdown-div">
                            <div class="invers-head">
                                <p>SCRAMBLE COUNTDOWN</p>
                            </div>

                            <div class="area">
                                <!-- 30个计时 -->
                                <div class="countdown">
                                    <div id="tick1" class="tick"></div>
                                    <div id="tick2" class="tick"></div>
                                    <div id="tick3" class="tick"></div>
                                    <div id="tick4" class="tick"></div>
                                    <div id="tick5" class="tick"></div>
                                    <div id="tick6" class="tick"></div>
                                    <div id="tick7" class="tick"></div>
                                    <div id="tick8" class="tick"></div>
                                    <div id="tick9" class="tick"></div>
                                    <div id="tick10" class="tick"></div>
                                    <div id="tick11" class="tick"></div>
                                    <div id="tick12" class="tick"></div>
                                    <div id="tick13" class="tick"></div>
                                    <div id="tick14" class="tick"></div>
                                    <div id="tick15" class="tick"></div>
                                    <div id="tick16" class="tick"></div>
                                    <div id="tick17" class="tick"></div>
                                    <div id="tick18" class="tick"></div>
                                    <div id="tick19" class="tick"></div>
                                    <div id="tick20" class="tick"></div>
                                    <div id="tick21" class="tick"></div>
                                    <div id="tick22" class="tick"></div>
                                    <div id="tick23" class="tick"></div>
                                    <div id="tick24" class="tick"></div>
                                    <div id="tick25" class="tick"></div>
                                    <div id="tick26" class="tick"></div>
                                    <div id="tick27" class="tick"></div>
                                    <div id="tick28" class="tick"></div>
                                    <div id="tick29" class="tick"></div>
                                    <div id="tick30" class="tick"></div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="right">
                    <div class="target">
                        <div class="head">
                            <p>CLONE TARGET</p>
                        </div>
                        <img class="target-fingerprint" src="" alt="">

                        <div class="access-attempts">
                            <p>ACCESS</p>
                            <p>ATTEMPTS</p>
                        </div>
                        <img class="anime1" src="imgs/g2.gif" alt="">
                        <img class="anime2" src="imgs/g1.gif" alt="">
                    </div>

                    <div class="decypher">
                        <div class="head">
                            <p>DECYPHERED SIGNALS</p>
                        </div>

                        <div class="decypher-fingerprints">
                            <div id="decypher1" class="decypher-fingerprint">
                                <img src="imgs/fingerprints/1.jpg" alt="">
                            </div>
                            <div id="decypher2" class="decypher-fingerprint">
                                <img src="imgs/fingerprints/2.jpg" alt="">
                            </div>
                            <div id="decypher3" class="decypher-fingerprint">
                                <img src="imgs/fingerprints/3.jpg" alt="">
                            </div>
                            <div id="decypher4" class="decypher-fingerprint">
                                <img src="imgs/fingerprints/4.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>


    </div>


</body>

</html>